<template>
  <div class="test-ai">
    <el-card>
      <template #header>
        <h2>AI助手测试页面</h2>
      </template>
      
      <div class="test-info">
        <p><strong>测试模式状态:</strong> {{ isTestMode ? '是' : '否' }}</p>
        <p><strong>用户信息:</strong> {{ userInfo }}</p>
        <p><strong>Token:</strong> {{ token ? '已设置' : '未设置' }}</p>
      </div>
      
      <el-divider />
      
      <div class="test-actions">
        <el-button @click="testSendMessage" type="primary">测试发送消息</el-button>
        <el-button @click="clearMessages" type="warning">清空消息</el-button>
      </div>
      
      <el-divider />
      
      <div class="chat-messages">
        <h3>消息记录:</h3>
        <div v-for="(msg, index) in messages" :key="index" class="message">
          <strong>{{ msg.type }}:</strong> {{ msg.content }}
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()

const messages = ref([])

const isTestMode = computed(() => authStore.getIsTestMode())
const userInfo = computed(() => {
  const user = authStore.user
  return user ? `${user.username} (${user.role})` : '未登录'
})
const token = computed(() => authStore.token)

const testSendMessage = async () => {
  const testMessage = '这是一条测试消息'
  
  messages.value.push({
    type: 'user',
    content: testMessage
  })
  
  console.log('测试发送消息:', testMessage)
  console.log('测试模式:', isTestMode.value)
  
  if (isTestMode.value) {
    setTimeout(() => {
      messages.value.push({
        type: 'assistant',
        content: `测试模式回复：我收到了你的消息"${testMessage}"。这是一个模拟的AI助手回复。`
      })
    }, 1000)
  } else {
    messages.value.push({
      type: 'assistant',
      content: '真实模式：需要调用API'
    })
  }
}

const clearMessages = () => {
  messages.value = []
}
</script>

<style scoped>
.test-ai {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
}

.test-info {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.test-info p {
  margin: 5px 0;
}

.test-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.chat-messages {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 15px;
}

.message {
  margin-bottom: 10px;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 4px;
}

.message strong {
  color: #409eff;
}
</style>
